<template>
  <!--  运营商通话记录top50-->
  <Table border :header-style="{backgroundColor:'#fffbed'}" max-height="400px" :table-data="tableData"
         :table-column="tableColumn"
         :page="false">
    <template slot="phone" slot-scope="{row}">
      <el-popover
          placement="right"
          width="120px"
          trigger="click">
        <SelectCallPhone :phone="row.otherPartyPhone" :modeType="modeType"  modeKey="operator50" :orderId="routesQuery.orderId"/>
        <el-link slot="reference"  :underline="false" type="primary">{{
            row.otherPartyPhone
          }}
        </el-link>
      </el-popover>
    </template>
  </Table>
</template>

<script>
import {callInfoTop50} from "@/api/order";

export default {
  props: ['routesQuery'],
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('联系人'), align: 'center', prop: 'callName'},
        {label: this.$t('手机号码'), align: 'center', prop: 'otherPartyPhone',slot:'phone',minWidth:100},
        {label: this.$t('最后通话时间'), align: 'center', prop: 'lastCallTime',minWidth:150},
        {label: this.$t('通话次数'), align: 'center', prop: 'callNum'},
        {label: this.$t('总通话时长'), align: 'center', prop: 'duration'},
        {label: this.$t('是否黑名单'), align: 'center', prop: 'blacklist',isHtml:true},
        {label: this.$t('是否灰名单'), align: 'center', prop: 'isGreyList', isHtml: true},
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        Total: 0,
      }
    }
  },
  computed: {
    modeType() {
      return this.routesQuery.modeType || null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const {userId} = this.routesQuery
      const res = await callInfoTop50({
        userId: parseInt(userId)
      })
      if (res.code === 1 && res.data) {
        this.tableData = res.data.map(item => {
          item.duration = item.duration ? item.duration + 's' : ''
          item.blacklist = item.blacklist === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          item.isGreyList = item.isGreyList === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          return item
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
